<template>
  <div class="box2">
    <p>我是ComponentA</p>
    <p>propName:{{ propName }}</p>
    <p>name:{{ name }}</p>
    <p>isPublished:{{ isPublished }}</p>
    <p>commentIds:{{ commentIds }}</p>
    <p>author:{{ author }}</p>
    <button @click="addAge">子组件传值给父组件</button>
  </div>
</template>

<script>
export default {
  name: 'component-a',
  // 1.第一种props为数组
  // props: ['propName', 'name', 'isPublished', 'commentIds', 'author']
  //2. 第二种props为对象，可设置类型、必填、默认值等
  // props: {
  //   propName: String,
  //   name: String,
  //   isPublished: Boolean,
  //   commentIds: Array,
  //   author: Object
  // },
  //3. 第三种props为对象，可设置类型、必填、默认值等
  props: {
    // 自定义验证函数
    propName: {
      type: String,
      validator(value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].includes(value)
      },
      default: 'success',
      required: true
    },
    name: String,
    isPublished: {
      type: Boolean,
      default: false
    },
    commentIds: {
      type: Array,
      default() {
        return [4, 5, 6]
      }
    },
    author: {
      type: Object,
      default() {
        return {
          name: '张三',
          age: 18
        }
      }
    }
  },
  inheritAttrs: true,
  methods: {
    // 子组件传值给父组件
    addAge() {
      console.log(this.author)
      this.$emit('setAge', this.author.age + 1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
